<template>
  <div class="maintain-box">
    <div class="table-box">
      <IconTitle title="基本信息" imgUrl="yunwei">
        <span class="slot">品牌管理</span>
      </IconTitle>
      <div class="echarts-box">
        <el-row :gutter="10">
          <el-col :span="8"
            ><div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>保养情况</span>
              </div>
              <div class="main-item">
                <span>最近保养</span>
                <div class="flex">
                  <span>2021-10-23 ~ 2021-10-239</span>
                  <span>月</span>
                  <span>张如玉</span>
                </div>
              </div>
              <div class="main-item">
                <span>下次保养</span>
                <div class="flex green">
                  <span>2021-10-23 ~ 2021-10-239</span>
                  <span>月</span>
                  <span>张如玉</span>
                </div>
              </div>
            </div></el-col
          >
          <el-col :span="8"
            ><div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>今年执行情况</span>
              </div>
              <div id="faultEcharts" style="height: 140px"></div>
              
            </div>
          </el-col>
          <el-col :span="8"
            ><div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>近五年保养次数对比</span>
              </div>
              <div id="numsEcharts" style="height: 140px"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="table-box">
      <div class="echarts-box">
        <el-row :gutter="10">
          <el-col :span="16"
            ><div class="echarts-item">
              <IconTitle title="关联计划" imgUrl="yunwei">
                <span class="slot">关联的标准计划</span>
              </IconTitle>
                  <el-table
        :data="deviceData"
        border
        style="width: 100%"
        @selection-change="deviceSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column prop="date" label="计划编号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="计划名称" align="center">
        </el-table-column>
        <el-table-column prop="name" label="负责人" align="center">
        </el-table-column>
        <el-table-column prop="name" label="循环类型" align="center">
        </el-table-column>
        </el-table-column>
      </el-table>
            </div>
          </el-col>
          <el-col :span="8"
            ><div class="echarts-item">
              <IconTitle title="关联标准" imgUrl="yunwei">
                <span class="slot">关联标准项目</span>
              </IconTitle>
                  <el-table
        :data="deviceData"
        border
        style="width: 100%"
        @selection-change="deviceSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column prop="date" label="标准编号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="标准名称" align="center">
        </el-table-column>
      </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-card class="box-card btn-search page-search">
      <div slot="header">
        <div class="btn-box">
          <el-button type="info" icon="el-icon-refresh-left"></el-button>
          <el-button type="check" icon="el-icon-download">导出</el-button>
        </div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="报修编号">
            <el-input
              placeholder="报修编号"
              v-model="searchForm.roleName"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="报修人">
            <el-input
              placeholder="报修人"
              v-model="searchForm.roleCode"
            ></el-input>
          </el-form-item>
          <el-form-item label="故障类型">
            <el-select
              placeholder="故障类型"
              v-model="searchForm.dsType"
              clearable
              style="width: 120px"
            >
              <el-option label="你好" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button icon="el-icon-refresh-right">重置</el-button>
          </el-form-item>
        </el-form>
        <div></div>
      </div>
    </el-card>
    <div class="table-box">
      <IconTitle title="保养记录" imgUrl="yunwei">
        <span class="slot">保养记录表</span>
      </IconTitle>
      <!-- 设备文档 -->
      <el-table
        :data="deviceData"
        border
        style="width: 100%"
        @selection-change="deviceSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column prop="date" label="资料名称" align="center">
        </el-table-column>
        <el-table-column prop="name" label="资料类别" align="center">
        </el-table-column>
        <el-table-column prop="name" label="文档密级" align="center">
        </el-table-column>
        <el-table-column prop="address" label="文件数量" align="center">
        </el-table-column>
        <el-table-column prop="address" label="说明" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
// import echarts from "echarts";
import * as echarts from 'echarts';
import IconTitle from "@/components/icon-title/index.vue";
let numsEchartsOptions = {
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["2016年", "2017年", "2018年", "2019年", "2020年"],
  },
  yAxis: {
    type: "value",
    show: false,
    splitLine: {
      show: false,
    },
  },
  grid: {
    top: "20%",
    left: "0%",
    right: "5%",
    bottom: "0%",
    containLabel: true,
  },
  series: [
    {
      data: [4, 10, 6, 9, 6],
      type: "line",
      itemStyle: {
        normal: {
          color: "#79a8f9",
          lineStyle: {
            color: "#79a8f9",
          },
          label: { show: true }
        },
      },
      areaStyle: {
        normal: {
          // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //   { offset: 0, color: "#79a8f9" },
          //   { offset: 0.5, color: "#a1c2fa" },
          //   { offset: 1, color: "#e4eefd" },
          // ]),
        },
      },
      lineStyle: {
        color: "#79a8f9",
      },

      smooth: true, //true 为平滑曲线，false为直线
    },
  ],
};
let faultOption = {
  grid: {
    top: "20%",
    left: "0%",
    right: "10%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: ["2月", "3月", "4月", "5月",'6月','7月','8月'],
    axisLabel: {
      rotate: 40,
    },
  },
  yAxis: {
    type: "value",
    show: false,
  },

  series: [
    {
      data: [20, 30, 10, 40,30,28,36],
      type: "bar",
      label: {
        show: true,
        position: "top",
      },
      color: "#63b6f8",
       markLine : {
　　data : [
　　　　{type : 'average', name: '平均次数'}
　　]
}
    },
  ],
};
export default {
  name: "account-detail",
  components: {
    IconTitle,
  },
  data() {
    return {
      searchForm: {},
      deviceData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
      numsEchartsOptions,
      faultOption
    };
  },
  mounted() {
    var numsEchartsDom = document.getElementById("numsEcharts");
    var numsEcharts = this.$echarts.init(numsEchartsDom);
    numsEcharts.setOption(this.numsEchartsOptions);


    var faultDom = document.getElementById("faultEcharts");
    var faultEcharts = this.$echarts.init(faultDom);
    faultEcharts.setOption(this.faultOption);
  },
  methods: {
    deviceSelectionChange() {},
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/color.scss";
.maintain-box {
  .main-item {
    margin-top: 15px;
    .flex {
      padding: 5px;
      background: #f3f5fb;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .flex.green {
      background: #effcf4;
    }
  }
}
</style>
